import React from 'react';
import FlatButton from 'material-ui/FlatButton';
import Dialog from 'material-ui/Dialog';
import TextField from 'material-ui/TextField';
import history from '../history';

export default class AnswerRedirector extends React.Component {
    constructor(props){
        super(props)

        this.state = {
            open: false,
            surveyId: '',
        }

        this.handleClose = this.handleClose.bind(this)
        this.handleOpen = this.handleOpen.bind(this)
        this.handleNavToAnswer = this.handleNavToAnswer.bind(this)
        this.handleChange = this.handleChange.bind(this)
    }

    handleNavToAnswer(){
        console.log('导航到Answer: '+this.state.surveyId)
        if(this.state.surveyId.length<1){
            alert('请输入正确的问卷id')
            return
        }
        this.handleClose()
        // history.push('/answer?name=fuck&sex=man')
        history.push('/answer/'+this.state.surveyId)
    }

    handleClose(){
        this.setState({
            open: false
        })
    }

    handleOpen(){
        this.setState({
            open: true
        })
    }

    handleChange(e){
        const t = e.target

        this.setState({
            [t.name]: t.value
        })
    }

    render() {
        const actions = [
            <FlatButton
                label="Cancel"
                primary={true}
                onClick={this.handleClose}
            />,
            <FlatButton
                label="OK"
                primary={true}
                // keyboardFocused={true}
                onClick={this.handleNavToAnswer}
            />,
        ]
        return (
            <div>
                <FlatButton style={{color: 'white'}} onClick={this.handleOpen} label="答题"/>
                <Dialog
                    title='问卷ID'
                    actions={actions}
                    modal={false}
                    open={this.state.open}
                    contentStyle={{width: '350px'}}
                    onRequestClose={this.handleClose}>

                    <TextField
                        value={this.state.surveyId}
                        hintText="问卷ID"
                        name="surveyId"
                        onChange={this.handleChange}
                        floatingLabelText="请输入问卷ID"/>
                </Dialog>
            </div>
        )
    }
}